<template>
    <div class="menuContent">
        <el-card>
            <el-button @click="getMenuAll" round>根目录</el-button>
            <el-tree
                :data="dataTree"
                :props="defaultProps"
                accordion
                @node-click="handleNodeClick"
            >
            </el-tree>
        </el-card>
        <el-card>
            <div class="btn">
                <el-button
                    v-for="(item, i) in roles"
                    :key="i"
                    type="primary"
                    :icon="item.icon"
                    circle
                    @click="btnBox(item.type)"
                ></el-button>
            </div>
            <div class="list">
                <el-table
                    ref="singleTable"
                    :data="newtableData"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                    style="width: 100%"
                >
                    <el-table-column type="index" width="50"> </el-table-column>
                    <el-table-column property="menuName" label="名称">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.menuType | getTagName">{{
                                scope.row.menuName
                            }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column property="menuIcon" label="图标">
                        <template slot-scope="scope">
                            <i :class="scope.row.menuIcon"></i>
                        </template>
                    </el-table-column>
                    <el-table-column property="menuSort" label="排序">
                    </el-table-column>
                    <el-table-column property="menuUrl" label="路径">
                        <template slot-scope="scope">
                            {{ scope.row.menuUrl || "无" }}
                        </template>
                    </el-table-column>
                    <el-table-column property="menuStatus" label="状态">
                        <template slot-scope="scope">
                            <el-tag :type="scope.row.menuStatus | getTagStatus">
                                {{ scope.row.menuStatus ? "显示" : "隐藏" }}
                            </el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
        <addMenus
            @show="isShow = false"
            :menuInfo="menuInfo"
            :isShow="isShow"
            @refreshBox="getMenuList"
        ></addMenus>
    </div>
</template>
<script>
import { getDemo } from "../../api/demo";
import { getMenuList, delMenus } from "../../api/sysApi";
import addMenus from "../../components/sys/addMenus.vue";
export default {
    data() {
        return {
            dataTree: [],
            defaultProps: {
                children: "children",
                label: "label",
            },
            roles: [
                { type: "add", icon: "el-icon-plus" },
                { type: "update", icon: "el-icon-edit-outline" },
                { type: "del", icon: "el-icon-minus" },
            ],
            tableData: [],
            currentRow: null,
            isShow: false,
            menuInfo: null,
        };
    },
    components: {
        addMenus,
    },
    created() {
        this.getMenuList();
    },
    mounted() {},
    methods: {
        btnBox(t) {
            switch (t) {
                case "add":
                    this.isShow = true;
                    this.menuInfo = null;
                    return;
                case "update":
                    if (this.currentRow != null) {
                        this.isShow = true;
                        this.menuInfo = JSON.parse(
                            JSON.stringify(this.currentRow)
                        );
                    } else {
                        this.$message("请选中数据");
                    }
                    return;
                case "del":
                    if (this.currentRow.id == undefined) {
                        this.$message({
                            type: "info",
                            message: "按钮不可删除",
                        });
                        return;
                    }
                    if (this.currentRow != null) {
                        this.$confirm(
                            "此操作将永久删除该数据, 是否继续?",
                            "提示",
                            {
                                confirmButtonText: "确定",
                                cancelButtonText: "取消",
                                type: "warning",
                            }
                        )
                            .then(() => {
                                const loading = this.$loading({
                                    lock: true,
                                    text: "Loading",
                                    spinner: "el-icon-loading",
                                    background: "rgba(0, 0, 0, 0.7)",
                                });
                                delMenus(this.currentRow.id).then((res) => {
                                    loading.close();
                                    console.log("del", res);
                                    this.$message({
                                        type: "success",
                                        message: "删除成功!",
                                    });
                                });
                            })
                            .catch(() => {
                                this.$message({
                                    type: "info",
                                    message: "已取消删除",
                                });
                            });
                    } else {
                        this.$message("请选中数据");
                    }
                    return;
            }
        },
        getMenuAll() {
            this.tableData = this.dataTree;
        },
        handleNodeClick(data) {
            if (data.children.length == 0) {
                this.tableData = [
                    {
                        menuName: "新增",
                        menuIcon: "el-icon-plus",
                        menuSort: "1",
                        menuUrl: "无",
                        menuStatus: "1",
                        menuType: 3,
                    },
                    {
                        menuName: "修改",
                        menuIcon: "el-icon-plus",
                        menuSort: "1",
                        menuUrl: "无",
                        menuStatus: "1",
                        menuType: 3,
                    },
                    {
                        menuName: "删除",
                        menuIcon: "el-icon-plus",
                        menuSort: "1",
                        menuUrl: "无",
                        menuStatus: "1",
                        menuType: 3,
                    },
                ];
            } else {
                this.tableData = data.children;
            }
        },
        setCurrent(row) {
            this.$refs.singleTable.setCurrentRow(row);
            console.log(row);
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        getMenuList() {
            getMenuList().then((res) => {
                let data = [];
                res.data.list.forEach((i) => {
                    i.label = i.menuName;
                    i.children = res.data.list.filter(
                        (j) => j.parentMenuId == i.id
                    );
                    if (i.parentMenuId == undefined) {
                        data.push(i);
                    }
                });
                this.tableData = data;
                this.dataTree = data;
            });
        },
    },
    computed: {
        newtableData() {
            return this.tableData.sort((a, b) => a.menuSort - b.menuSort);
        },
    },
    filters: {
        getTagName(n) {
            switch (n) {
                case "1":
                    return "success";
                case "2":
                    return "warning";
            }
            return "";
        },
        getTagStatus(n) {
            if (n) return "success";
            else return "danger";
        },
    },
};
</script>

<style lang="scss">
.menuContent {
    overflow: hidden;
    flex: 1;
    margin: 20px 0;
    display: flex;
    .el-card {
        overflow: hidden;
        &:hover {
            overflow-y: auto;
        }
        &:nth-child(1) {
            margin-right: 20px;
            text-align: left;
            button {
                margin-bottom: 5px;
            }
            // flex: 2;
            width: 250px;
        }
        //操作页面
        &:nth-child(2) {
            flex: 7;
            .btn {
                text-align: left;
            }
            .list {
            }
        }
    }
}
</style>
